<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>参与竞价</title>
</head>
<style>
    #footer {
        margin-left: 50%;
        margin-bottom: 40px;
        position: absolute;

        bottom: 0;
    }

    .goods {
        outline: #00FF00 dotted thick;
        border-radius: 2em;
    }
    input[type='number'] {
        -moz-appearance: textfield !important;
    }

</style>
<script src="../../plugins/vue/vue.js"></script>
<script src="../../plugins/axios/axios.min.js"></script>
<link rel="stylesheet" href="../../plugins/element-ui/index.css">
<script src="../../plugins/element-ui/index.js"></script>

<body>
<div id="app">
    <div>
        <template>
            <div>
                <div style="margin-top: 30px;">

                    <el-button type="primary" style="margin-left: 1000px" @click="changeStatus(1)"
                               :disabled="btnUnChecked">进行中 </el-button>
                    <el-button type="danger" style="margin-left: 5px" @click="changeStatus(2)"
                               :disabled="btnPassed">已结束 </el-button>
                    
                </div>
            </div>
        </template>
    </div>

    <el-table :data="tableData" border stripe style="margin-top:30px;width: 1105px;margin-left: 100px;">
        <!-- <el-table-column
  align="center"
  type="selection"
  width="55"
></el-table-column> -->
        <el-table-column align="center" prop="goodsName" label="商品名称" width="288" :show-overflow-tooltip='true'>
        </el-table-column>

        <el-table-column align="center" prop="typeName" label="类别" width="80"></el-table-column>
        <el-table-column align="center" prop="maxAmount" label="当前价" width="80"></el-table-column>
        <el-table-column align="center" prop="bidAmount" label="我的出价" width="80">
<!--            <template v-slot="scope">-->
<!--                <span v-if="scope.row.bidAmount == 0">未出价</span>-->
<!--            </template>-->
        </el-table-column>
        </el-table-column>
      
        <el-table-column align="center" prop="startingTime" label="开始时间" width="160"></el-table-column>
        <el-table-column align="center" prop="endTime" label="结束时间" width="160"></el-table-column>

      
        <el-table-column label="操作" width="255" align="center">
            <template slot-scope="scope">
                <el-button type="primary" @click="viewDetails(scope.row)" size="small">查看详情 </el-button>
            </template>
        </el-table-column>
    </el-table>

    <div class="block" id="footer">
        <el-pagination @current-change="handleCurrentChange" :current-page="pagination.currentPage"
                       :page-size="pagination.pageSize" layout="total, prev, pager, next, jumper" :total="pagination.total">
        </el-pagination>
    </div>

   
</div>






</body>

<script>
    new Vue({
        el: "#app",
        data() {
            return {
              
                value1: [],
                dialogFormVisible: false,
              
                formLabelWidth: '120px',
                btnUnChecked: false,
                btnPassed: false,
                btnUnPassed: false,
                btnUnBuyed: false,
                type: "",
                tableData: [{
                    "goodsId": "1",
                    "userId": null,
                    "goodsName": "劳力士",
                    "deposit": "50",
                    "description": null,
                    "imageId": null,
                    "startingPrice": 500,
                    "startingTime": "2022/12/01 15:00",
                    "endTime": "2022/12/02 15:00",
                    "priceMarkup": 0,
                    "images": null,
                    "typeName": "表",
                    "status": "1",
                    "userName": "LostSouls",
                    "realName": null,
                    "phone": "15213324310",
                    "email": "2568938256@qq.com",
                    "breakCount": 0
                }],

                pagination: { //分页相关模型数据
                    currentPage: 1, //当前页码
                    pageSize: 8, //每页显示的记录数
                    total: 0, //总记录数
                },
                publishForm:{},
                status: "1",
                url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                pickerOptions: {
                    disabledDate(time) {
                        const date = new Date();
                        return time.getTime() < date.getTime();

                    },
                }

            };



        },

        created() {
            this.getAll();
        
        },



        methods: {
            getAll() {
                this.btnUnChecked = false;
                this.btnUnPassed = false;
                this.btnPassed = false;
                this.btnUnBuyed = false;
                if (this.status == "1") {
                    this.btnUnChecked = true;
                }
                if (this.status == "2") {
                    this.btnPassed = true;
                }
              
                axios.get("/auction/getAll/" + this.pagination.currentPage + "/" + this.pagination.pageSize +
                    "/" + this.status + "/" + sessionStorage.getItem("userId")).then((res) => {
                    this.tableData = res.data.data.list;
                    this.pagination.pagesize = res.data.data.pageSize;
                    this.pagination.currentPage = res.data.data.pageNum;
                    this.pagination.total = res.data.data.total;
                })

            },
            handleCurrentChange(currentPage) {
                this.pagination.currentPage = currentPage;
                this.getAll();
            },
            viewDetails(row) {
                sessionStorage.setItem("currentGoodsId",row.goodsId);
                window.parent.location.href = "./goodsDetail.html"
                // this.form = row;

                // this.dialogFormVisible= true;
                // this.$alert("点击" + this.dialogFormVisible)
            },
            changeStatus(status) {
                this.status = status;
                this.pagination.currentPage = 1;
                this.getAll();
            }
        }

    })
</script>

</html>